<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { myApply } from '@/api/partTimeJob'
import { PartTimeJob } from "@/api/partTimeJob/type"
import { BasePageReq, BaseResponse } from "@/api/base"
import { toast } from "@/utils/common"
import { applyStatus, applyStatusColor } from "./common"

const applyList = ref<PartTimeJob[]>([])
const jobReq = ref<BasePageReq>({ pageNum: 1, pageSize: 10 })
const loadStatus = ref<string>('loadmore')
const moreStatus = ref<boolean>(true)

const loadMyApply = async () => {
  loadStatus.value = 'loading'
  try {
    const res: BaseResponse = await myApply(jobReq.value)
    if (jobReq.value.pageNum == 1 && res.data.records.length < jobReq.value.pageSize) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      applyList.value = applyList.value.concat(res.data.records)
      jobReq.value.total = res.data.total
      return
    }
    if (!res.data || res.data.records.length == 0 || res.data.total < applyList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    applyList.value = applyList.value.concat(res.data.records)
    loadStatus.value = 'loadmore'
    jobReq.value.pageNum++
  } catch (error: BaseResponse) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}

onLoad(() => {
  loadMyApply()
})
onReachBottom(() => {
  // 如果依然还有数据，就触发
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadMyApply()
      loadStatus.value = 'loadmore'
    }, 500)
  }
})

const jumpToDetail = (item: PartTimeJob) => {
  uni.navigateTo({ url: `/pages/partTimeJob/detail?id=${item.id}` })
}
</script>

<template>
  <view class="part-time-job-my">
    <view class="list" v-if="applyList && applyList.length > 0">
      <view v-for="(item) in applyList" :key="item.id" class="job-card" @click="jumpToDetail(item)">
        <view class="info-row">
          <view class="info-item">
            <uv-text class="title-text" bold size="32rpx" :text="item.title"></uv-text>
          </view>
          <view class="info-item" style="justify-content: flex-end;">
            <uv-tags :text="applyStatus(item.applyStatus)" :type="applyStatusColor(item.applyStatus)"></uv-tags>
          </view>
        </view>
        <view class="info-row">
          <view class="info-item">
            <uv-text prefixIcon="account" v-if="item.applyCount > 0" :text="item.applyCount + '人已报名'"></uv-text>
            <uv-text prefixIcon="account" v-else text="暂无人报名"></uv-text>
          </view>
          <uv-text class="salary-text" color="red" :lines="1" :text="item.salary"></uv-text>
        </view>
        <view class="info-row">
          <view class="info-item">
            <uv-icon name="list-dot" size="16" class="icon"></uv-icon>
            <text class="info-text">招聘{{ item.count }}人</text>
          </view>
          <uv-text class="info-text" prefixIcon="clock" :lines="1" :text="item.workTime"></uv-text>
        </view>
      </view>
      <view style="background-color: #fff;">
        <uv-load-more bgColor="#fff" :status="loadStatus" @loadmore="loadMyApply"></uv-load-more>
      </view>
    </view>
    <uv-empty class="empty" v-else text="暂未申请兼职" icon="../../static/empty.png" width="80" height="80"></uv-empty>
  </view>
</template>

<style lang="scss" scoped>
.list {
  display: flex;
  background-color: #fff;
  flex-direction: column;

  .job-card {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    border-bottom: 1px solid #f1f1f1;

    .info-row {
      display: flex;
      justify-content: space-between;
      margin: 10rpx 0;

      .info-item {
        display: flex;
        align-items: center;
        flex: 1;
      }

      .salary-text {
        justify-content: flex-end !important;
      }

      .info-text {
        justify-content: flex-end !important;
      }
    }
  }
}

.empty {
  background-color: #f1f1f1;
  margin-top: 70% !important;
}
</style>
